const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  devtool: 'source-map',
  // devtool: false,
  context: process.cwd(),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js'
  },
  plugins: [new HtmlWebpackPlugin({
    template: './src/index.html'
  })],
  resolveLoader: {// 设置如何找loader
    alias: { // 单个或较少，自己写的loader需要改变加载地址
      // 'babel-loader': path.resolve('./loaders/babel-loader.js')
    },
    modules: [path.resolve('./loaders'), 'node_modules'] // 指定加载loader的位置，越靠前约先

  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              sourceMaps: true, // 如果不传这个值，默认false，babel生成es6转为es5的映射map为空，导致webpack配置项devtool:souceMap,缺少moudle这一块映射
            }
          }
        ]
      },
      // {
      //   test: /\.(png|jpg|gif)$/,
      //   use: [
      //     {
      //       loader: 'file-loader',
      //       options: {
      //         filename: '[hash].[ext]'
      //       }
      //     }
      //   ]
      // }
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              filename: '[hash].[ext]',
              limit: 30 * 1024,
              fallback: path.resolve('./loaders/file-loader.js')/* 回头再看 */
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'less-loader'],
      },
    ]
  }
}